<template>
  <div class="species-item" @click="isShow">
    <!-- <span class="category_name">{{ goodsItem.category_name }}</span> -->
    <img v-lazy="'http://'+goodsItem.img" alt="" @load="imageLoad" />
    <ul class="list" v-show ="show">
      <li class="list-item border-bottom" v-for=" (goods,index) in goodsItem.childs" :key="index">
        <span class="chinese-name">{{goods.category_name}}</span>
        <span class="english-name"></span>
        <span class="icon">></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "goodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data () {
    return {
      show:false
    }
  },
  methods: {
    imageLoad() {
      // console.log(111)
      this.$bus.$emit("itemImageLoad");
    },
    itemClick() {
      //跳转到详情页
      this.$router.push("/detail/" + this.goodsItem.id);
    },
    isShow() {
      this.show = !this.show
    },
  },
};
</script>

<style lang="less" scoped>
.species-item {
  margin-bottom: 0.15rem;
  // .category_name {
  //   position: relative;
  //   top: 0.2rem;
  //   left: 1.1rem;
  //   font-size: 0.14rem;
  //   color: #666;
  // }
  .list {
    font-size: 0.14rem;
    color: #666;
    .list-item {
      height: .345rem;
      line-height: .345rem;
      .chinese-name {
        margin-left: 0.3rem;
      }
      .english-name {
        margin-left: 0.155rem;
      }
      .icon {
        float: right;
        margin-right: 1.35rem;
        width: .07rem;
        height: .11rem;
      }
    }
  }
  img {
    // margin-top: -0.28rem;
    display: block;
    width: 2.6rem;
    height: 0.85rem;
  }
}
</style>
